<div class="page-content">
    <div class="panel panel-default">
        <div class="panel-heading">
            <ul class="breadcrumb">
                <li><a href="<{:U('Subject/index')}>">课程管理</a> </li>
                <li>
                    <a href="<{:U('Subject/section',array('subjectid'=>$section_data['sectionsubjectid']))}>">
                        <{$section_data.section}>
                    </a>
                </li>
                <li> <a href="<{:U('Subject/knows',array('sectionid'=>$section_data['sectionid']))}>">课时管理</a></li>
                <li class="active">添加课时</li>
            </ul>
        </div>
        <div class="panel-body">
            <form id="form" class="form-horizontal" enctype="multipart/form-data" action="<{:U('Subject/add_knows')}>" autocomplete="off" method="post" novalidate="novalidate">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">视频</a></li>
                    <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">题目</a></li>
                    <li role="presentation"  ><a href="#profile2" role="tab" data-toggle="tab">图文解析</a></li>
                     <li role="presentation" ><a href="#profile3" role="tab" data-toggle="tab">上传文件</a></li>
                    
                
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <input type="hidden" name="sectionid" value="<{$section_data.sectionid}>">
                        <input type="hidden" name="knowsid" value="<{$data.knowsid}>">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">标题</label>
                            <div class="col-sm-7">
                                <input type="text" name="knows" class="form-control" value="<{$data.knows}>">
                            </div>
                            <div class="col-sm-3">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">类型</label>
                            <div class="col-sm-7">
                                <select name="type">
                                    <option value="1">需正式开通</option>
                                    <option value="2">一元可试听</option>
                                </select>
                            </div>
                            <div class="col-sm-3">
                            </div>
                        </div>
                        <div class="form-group" id="choicebox">
                            <label class="col-sm-2 control-label">经验值</label>
                            <div class="col-sm-7">
                                <input type="text" name="xuebazi" value="<{$data.xuebazi}>" size="4" needle="needle" class="inline" autocomplete="off">
                                <span class="help-block">看视频获得经验值</span>
                            </div>
                            <div class="col-sm-3">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">选择视频</label>
                            <div class="col-sm-7">
                                <a title="选择视频" target="upload_video_modal" href="<{:U('Subject/upload_video')}>" data-type="modal" class="btn btn-default video-upload">选择视频文件 </a>
                            </div>
                            <div class="col-sm-3">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">上传的视频</label>
                            <div class="col-sm-7">
                                <p class="form-control-static">
                                    <input class="form-control" type="text" id="video_url" name="video_url" value="<{$data.video_url}>" />
                                </p>
                            </div>
                            <div class="col-sm-3">
                                <a onclick="_open_video(this)" src="<{$data.video_info.thumbnail}>" url="<{$data.video_info.m3u8_480}>" title="播放" class="btn btn-default video-upload">播放 </a>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">课程笔记</label>
                            <div class="col-sm-7">
                                <textarea style="width: 680px; height: 400px;" class="input_a1" name="pt_note" rows="2">
                                    <{$data.pt_note}>
                                </textarea>
                            </div>
                            <div class="col-sm-3">
                            </div>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane"  id="profile">
                         <div class="form-group">
                            <label class="col-sm-2 control-label">题目</label>
                            <div class="col-sm-7">
                                <textarea style="width: 680px; height: 400px;" data-type="kindeditor" class="input_a1" name="questions_content" rows="2">
                                    <{$data.questions_content}>
                                </textarea>
                            </div>
                            <div class="col-sm-3">
                            </div>
                        </div>

                    </div>

                    <div role="tabpanel" class="tab-pane "  id="profile2">
                    <div class="questions">
                        
                    </div>
                    

                    <div class="form-group mgt20">
                    <div class="col-sm-offset-2 col-sm-7">
                        <a  class="btn btn-primary" onclick="add_question()">增加题目</a>
                    </div>
                </div>

                    </div>

                     <div role="tabpanel" class="tab-pane"  id="profile3">
                         <div class="form-group" id="choicebox">
                            <label class="col-sm-2 control-label">上传题目</label>
                            <div class="col-sm-7">
                                <input type="file" name="attachment"  needle="needle" class="inline" autocomplete="off">
                              <a href="<{$data.attachment_array.attachment.url}>" target="_blank">  <{$data.attachment_array.attachment.name}></a>
                            </div>
                            <div class="col-sm-3">
                            </div>
                        </div>

                        <div class="form-group" id="choicebox">
                            <label class="col-sm-2 control-label">上传答案</label>
                            <div class="col-sm-7">
                                <input type="file" name="answer"   needle="needle" class="inline" autocomplete="off">
                              <a href="<{$data.attachment_array.answer.url}>" target="_blank">   <{$data.attachment_array.answer.name}>
                              </a>
                            </div>
                            <div class="col-sm-3">
                            </div>
                        </div>
                     </div>
                </div>
                <div class="form-group mgt20">
                    <div class="col-sm-offset-2 col-sm-7">
                        <button type="submit" class="btn btn-primary">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="modal_video" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">视频播放</h4>
            </div>
            <div class="modal-body">
                <div id="videoPlayer"></div>
            </div>
        </div>
    </div>
</div>
<style type="text/css">
    .question-step-one .col-sm-9{ padding: 0px }
</style>
<script type="text/javascript">
var len=$(".questions-one").length;
function add_question(data){
    len++;
    if(typeof(data)=="undefined"){
        data={
            'title':'',
            'steps':[{}],
        }
    }
    var items={
        'len':len,
        'data':data
    }
    var compiledRendered=box_render(items,"#content_html");
    $(".questions").append(compiledRendered);
    hiApp.bind($(".questions").find(".questions-one:last"));
}

function add_step(k){
  var html='<div class="question-step-one mgt10"> <div class="col-sm-9"><textarea style="width: 400px; height: 100px;" data-type="kindeditor" class="input_a1" name="questions['+k+'][step][]" rows="2"></textarea></div><div class="col-sm-2"><a class="btn btn-primary btn-xs mgl20" onclick="del_questions_step(this)">删除步骤</a></div><div class="clearfix"></div></div>';
  $(".question-step-"+k).append(html);
  hiApp.bind($(".question-step-"+k).find(".question-step-one:last"));

}

function del_questions(k){
$(".question-"+k).remove();
}

function del_questions_step(_this){
    $(_this).parents(".question-step-one").remove();
}


$(document).on("pageAfterShow",function(){
     var questions_analysis=<{$data.questions_analysis}>;
     if(len==0){
        if(questions_analysis){
            $.each(questions_analysis,function(i,v){
                add_question(v);
            })
        }else{
           add_question();
        }
       
    }
})


</script>
<script type="text/html" id="content_html">
<div class="questions-one question-{{items.len}}" >
                         <div class="form-group">
                            <label class="col-sm-2 control-label">题目</label>
                            <div class="col-sm-7">
                                <input class="form-control" type="text" value="{{items.data.title}}" name="questions[{{items.len}}][title]"  placeholder="第几问">
                            </div>
                            <div class="col-sm-3">
                             <a class="btn btn-primary btn-xs mgl20" onclick="del_questions({{items.len}})">删除题目</a>
                             <a class="btn btn-primary btn-xs mgl20" onclick="add_step({{items.len}})">增加步骤</a>
                            </div>
                        </div>
                         <div class="form-group">
                            <label class="col-sm-2 control-label">步骤</label>
                            <div class="col-sm-10 question-step-{{items.len}}">
                            {{each items.data.step as v kk }}
                              <div class="question-step-one mgt10">
                               <div class="col-sm-9">
                                <textarea style="width: 400px; height: 100px;" data-type="kindeditor" class="input_a1" name="questions[{{items.len}}][step][]" rows="2">{{v}}</textarea>
                              </div>
                               <div class="col-sm-2"><a class="btn btn-primary btn-xs mgl20" onclick="del_questions_step(this)">删除步骤</a></div>
                               <div class="clearfix"></div>
                              </div>
                            {{/each}}
                                

                            </div>
                            
                        </div>
                    </div>
</script>
<style type="text/css">
/*CC视频上传按钮样式*/

.video-upload {
    position: relative;
}

.video-upload .up-swf-box embed {
    position: absolute;
    top: -1px;
    left: -1px;
}

.video-progress {
    display: inline-block;
    margin-bottom: 0px;
    width: 200px;
    vertical-align: middle;
}

.video {
    position: relative;
}

.video .play {
    display: block;
    position: absolute;
    bottom: 10px;
    right: 10px;
    line-height: 20px;
    font-size: 22px;
}

#video_img img {
    max-width: 100%
}

#selected-file img {
    max-width: 200px
}
</style>
<script type="text/javascript" charset="utf-8" src="http://cdn.aodianyun.com/lss/ckplayer/player.js"></script>
<script>
function _open_video(obj) {
    var url = $(obj).attr("url"); //视频地址
    var image = $(obj).attr("src"); //封面图片
    var w = "560"; //视频宽度
    var h = "368"; //视频高度
    var flashvars = {
        f: 'http://cdn.aodianyun.com/lss/ckplayer/m3u8.swf',
        a: url,
        c: 0,
        s: 4,
        i: image,
        lv: 0
    };
    var params = {
        bgcolor: '#FFF',
        allowFullScreen: true,
        allowScriptAccess: 'always',
        wmode: 'transparent'
    };
    var video = [url];
    CKobject.embed('http://cdn.aodianyun.com/lss/ckplayer/ckplayer.swf', 'videoPlayer', 'ckplayerFlashBox', w, h, false, flashvars, video, params);

    $("#modal_video").modal("show");
}
</script>
<script>
$(function() {
    $(".form-horizontal").bootstrapValidator({
        message: '您填入的值不合法',
        fields: {
            knows: {
                message: '知识名称名称',
                validators: {
                    notEmpty: {
                        message: '知识名称不能为空'
                    },
                }
            },
            xuebazi: {
                message: '经验值',
                validators: {
                    notEmpty: {
                        message: '经验值不能为空'
                    },
                    greaterThan: {
                        value: 0,
                        message: '经验值不能小于0'
                    },
                }
            },

        }
    });


});
</script>
<link rel="stylesheet" href="__PUBLIC__/kindeditor-4.1.10/themes/default/default.css" />
<script charset="utf-8" src="__PUBLIC__/kindeditor-4.1.10/kindeditor-min.js"></script>
<script charset="utf-8" src="__PUBLIC__/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script type="text/javascript">
var editor;
KindEditor.ready(function(K) {
    editor1 = K.create('textarea[name="pt_note"]', {
        resizeType: 1,
        allowPreviewEmoticons: false,
        allowImageUpload: true,
        formatUploadUrl: false,
        uploadJson: '<php>echo "http://".$_SERVER["HTTP_HOST"];</php><{:api_url("Kindeditor/uploadJson")}>',
        afterBlur: function() {
            this.sync();
        }
    });

});
$(function() {
    $(document).on("videoUploadSuceess", function(e, json) {
        $("#video_url").val(json.data.location);
    })
})
</script>
